<template>
  <div class="xs-echarts-threel" id="threel"></div>
</template>

<script>
import echarts from "echarts";
export default {
  components: {},
  props: {},
  data() {
    return {
      myChart4: null,
      option4: {}
    };
  },
  watch: {},
  computed: {},
  methods: {
    threel() {
      var myChart4 = echarts.init(document.getElementById("threel"));
      var colorList = [
        "#afa3f5",
        "#00d488",
        "#3feed4",
        "#3bafff",
        "#f1bb4c",
        "#aff",
        "rgba(250,250,250,0.5)"
      ];
      this.option4 = {
        title: {
            subtext: '葡萄',
            x: 'center',
            y: '3%',
            textStyle: {
            color: "#fff",
            font: "10px Microsoft YaHei",
            fontWeight:'normal',
          },
            subtextStyle: {
                color: '#fff',
                fontSize: 16
            },
        },
        grid: {
          bottom: 150,
          left: 0,
          right: "10%"
        },
        legend: {
          type: "",
          orient: "horizontal",
          // x: "right",
          top: "90%",
          left: "10%",
          // bottom: "0%",
          itemWidth: 13,
          itemHeight: 8,
          itemGap: 16,
          textStyle: {
            color: "#A3E2F4",
            fontSize: 13,
            fontWeight: 0
          },
          data: [
            "阳光玫瑰",
            "夏黑无核",
            "弗雷无核",
            "晨香无核",
            "碧香无核",
            "蓝宝石"
          ]
        },
        series: [
          // 主要展示层的
          {
            radius: ["25%", "50%"],
            center: ["50%", "43%"],
            type: "pie",
            itemStyle: {
              normal: {
                color: function(params) {
                  return colorList[params.dataIndex];
                }
              }
            },
            labelLine: {
              normal: {
                show: true,
                length: 25,
                length2: 50,
                lineStyle: {
                  color: "#d3d3d3"
                },
                align: "right"
              },
              color: "#000",
              emphasis: {
                show: true
              }
            },
            label: {
              normal: {
                formatter: function(params) {
                  var str = "";
                  switch (params.name) {
                    case "阳光玫瑰":
                      str = "阳光玫瑰" + params.value + "%";
                      break;
                    case "夏黑无核":
                      str = "夏黑无核" + params.value + "%";
                      break;
                    case "弗雷无核":
                      str = "弗雷无核" + params.value + "%";
                      break;
                    case "晨香无核":
                      str = "晨香无核" + params.value + "%";
                      break;
                    case "碧香无核":
                      str = "碧香无核 " + params.value + "%";
                      break;
                    case "蓝宝石":
                      str = "蓝宝石 " + params.value + "%";
                      break;
                  }
                  return str;
                },
                padding: [0, -55],
                height: 25,
                rich: {
                  a: {
                    width: 38,
                    height: 38,
                    lineHeight: 50,

                    align: "left"
                  },
                  b: {
                    width: 29,
                    height: 45,
                    lineHeight: 50,
                    align: "left"
                  },
                  c: {
                    width: 34,
                    height: 33,
                    lineHeight: 50,

                    align: "left"
                  },
                  d: {
                    width: 34,
                    height: 44,
                    lineHeight: 50,
                    align: "left"
                  },
                  e: {
                    width: 38,
                    height: 30,
                    lineHeight: 50,
                    align: "left"
                  },
                  nameStyle: {
                    fontSize: 16,
                    color: "#555",
                    align: "left"
                  },
                  rate: {
                    fontSize: 20,
                    color: "#1ab4b8",
                    align: "left"
                  }
                }
              }
            },
            data: [
              {
                value: 35,
                name: "阳光玫瑰"
              },
              { value: 20, name: "夏黑无核" },
              { value: 17, name: "弗雷无核" },
              { value: 16, name: "晨香无核" },
              { value: 6, name: "碧香无核" },
              { value: 6, name: "蓝宝石" }
            ]
          },
          // 边框的设置
          {
            radius: ["50%", "55%"],
            center: ["50%", "43%"],
            type: "pie",
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            animation: false,
            tooltip: {
              show: false
            },
            itemStyle: {
              normal: {
                color: "rgba(250,250,250,0.5)"
              }
            },
            data: [
              {
                value: 1
              }
            ]
          }
        ]
      };
      myChart4.setOption(this.option4);
      window.addEventListener("resize", () => {
        myChart4.resize();
      });
    }
  },
  created() {},
  mounted() {
    this.$nextTick(function() {
      this.threel();
    });
  }
};
</script>
<style lang="scss">
// .three1{
//   height: 400px;
//   width: 100%;

//     background-size:100% 100%;
//     position:relative;
// 	bottom:10px;
// 	left:10px;
// 	right:10px;
//   box-sizing:border-box;
// }
.xs-echarts-threel {
  height: 400px;
  width: 100%;
}
</style>
